<template>
  <div class="svgs">
    <svg-icon v-for="item in arr" :key="item.index" class="item" :icon-class="item" @click="getSvgs(item)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        'menu',
        '404',
        'bug',
        'chart',
        'clipboard',
        'component',
        'dashboard',
        'documentation',
        'drag',
        'edit',
        'education',
        'email',
        'example',
        'excel',
        'exit-fullscreen',
        'eye',
        'eye-open',
        'form',
        'fullscreen',
        'guide',
        'icon',
        'international',
        'language',
        'link',
        'list',
        'lock',
        'message',
        'money',
        'nested',
        'password',
        'pdf',
        'people',
        'peoples',
        'qq',
        'region',
        'search',
        'shopping',
        'size',
        'skill',
        'star',
        'tab',
        'table',
        'theme',
        'tree',
        'tree-table',
        'user',
        'wechat',
        'zip'
      ]
    }
  },
  methods: {
    getSvgs(svg) {
      this.$emit('getSvgs', svg)
    }
  }
}
</script>

<style lang="scss">
.svgs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .item {
    width: 10%;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>
